<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            background: #fff;
        }

        .wrap {
            width: 100%;
            overflow: hidden;
        }

        .login_btn {
            width: 100%;
            padding: 0 15px;
            margin-top: 47px;
            box-sizing: border-box;
            height: 40px;
        }

        .login_btn button {
            width: 100%;
            height: 100%;
            border: none;
            line-height: 40px;
            /*background: rgba(108, 105, 255, 1);
            box-shadow: 0px 17px 40px 0px rgba(123, 102, 255, 0.22);*/
            border-radius: 20px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .aui-btn-success {
            color: #ffffff;
            background-color: #009688;
            opacity: 0.3;
        }

        .btnActive {
            opacity: 1;
        }

        .agreement {
            width: 100%;
            margin-top: 195px;
            padding: 0 20px;
            display: flex;
            /*margin: 15px;*/
        }

        .selected {
            width: 18px;
            height: 18px;
            margin-left: 33px;
        }

        .aui-checkbox {
            border-radius: 50%;
        }

        .aui-radio,
        .aui-checkbox {
            width: 18px;
            height: 18px;
            /*background-color: #ffffff;*/
            border: solid 1px #dddddd;
            -webkit-border-radius: 0.6rem;
            border-radius: 0.6rem;
            /*font-size: 0.8rem;*/
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-transition: background-color ease 0.1s;
            transition: background-color ease 0.1s;
        }

        .agreement .agree_text {
            font-size: 13px;
            color: #999999;
            line-height: 19px;
            height: 18px;
            margin-left: 5px;
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background: url(../../image/select.png) no-repeat;
            background-size: 18px 18px;
            border: none;
            /*background-color: #49A76D;
          border: solid 1px #49A76D;
          text-align: center;
          background-clip: padding-box;
          background: -moz-linear-gradient(top, #49A76D 0%, #97E3B4 100%);*/
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
          background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
          background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
          filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0);*/
        }

        .aui-radio:checked:before,
        .aui-radio.aui-checked:before,
        .aui-checkbox:checked:before,
        .aui-checkbox.aui-checked:before,
        .aui-radio:checked:after,
        .aui-radio.aui-checked:after,
        .aui-checkbox:checked:after,
        .aui-checkbox.aui-checked:after {
            content: '';
            width: 0rem!important;
            height: 0rem!important;
            position: absolute;
            top: 0!important;
            left: 0!important;
            margin-left: 0rem!important;
            margin-top: 0rem!important;
            background: transparent;
            border: 0px solid #ffffff !important;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .no_acount {
            width: 100%;
            padding: 0 32px;
            box-sizing: border-box;
            height: 30px;
        }

        .no_acount_inner {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-top: 5px;
            text-align: right;
            line-height: 30px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222222;
            display: flex;
            justify-content: space-between;
        }

        .no_acount_inner div {
            width: auto;
            max-width: 70px;
        }

        .box_input {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            margin-top: 30px;
            overflow: hidden;
        }

        .mobile_input {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
            overflow: hidden;
        }

        .mobile_input .acount_icon {
            width: 20px;
            height: 20px;
            margin-top: 5px;
            /*margin-left: 15px;*/
        }

        .mobile_input .acount_icon img {
            width: 100%;
            height: 100%;
        }

        .mobile_input .mobile_input_l {
            width: 100%;
            height: 30px;
            margin-left: 8px;
            flex: 1;
        }

        .mobile_input .mobile_input_l input {
            width: 100%;
            height: 100%;
            height: 20px;
            line-height: 20px;
            margin-top: 5px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }

        .mobile_input .mobile_input_r {
            /*width: auto;
            max-width: 60px;
            height: 100%;
            line-height: 20px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;*/
        }

        .ishideOP {
            width: 18px;
            height: 18px;
            background: url(../../image/invisible.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 1px;
            /*margin-right: 15px;*/
        }

        .isshowOP {
            width: 18px;
            height: 18px;
            background: url(../../image/isshow.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 1px;
            /*margin-right: 15px;*/
        }

        .acount_remove_icon {
            width: 18px;
            height: 18px;
            margin-top: 1px;
        }

        .acount_remove_icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .acount_remove_icon {
            width: 18px;
            height: 18px;
            margin-top: 6px;
        }

        .acount_remove_icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .mobile_input_r button {
            width: auto;
            height: 29px;
            background: #0099FF;
            border-radius: 3px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 29px;
            border: none;
            text-align: center;
            margin-top: 0.5px;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="wrap">
            <div class="box_input">
                <div class="mobile_input">
                    <div class="acount_icon">
                        <img src="../../image/acountIcon.png" alt="">
                    </div>
                    <div class="mobile_input_l">
                        <input type="text" placeholder="请输入手机号" v-model='mobile' @input='changeMobie' disabled="true">
                    </div>
                    <div class="mobile_input_r">
                        <div class="acount_remove_icon" v-if='isshowRemove' @click='clearAcount()'>
                            <img src="../../image/remove.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="mobile_input" style="margin-top:25px;">
                    <div class="acount_icon">
                        <img src="../../image/codeImg.png" alt="">
                    </div>
                    <div class="mobile_input_l">
                        <input type="number" placeholder="请输入验证码" v-model='code'>
                    </div>
                    <div class="mobile_input_r">
                        <button type="button" name="button" :disabled="disabled" @click='getCode()'>{{codedefault}}</button>
                    </div>
                </div>
                <div class="mobile_input" style="margin-top:25px;">
                    <div class="acount_icon">
                        <img src="../../image/passwordIcon.png" alt="">
                    </div>
                    <div class="mobile_input_l">
                        <input :type="input_type" placeholder="请输入新密码" v-model='psw' @input='changePsw'>
                    </div>
                    <div class="mobile_input_r">
                        <div :class="ishideOP" @click='isshowPass()'></div>
                    </div>
                </div>
            </div>

            <div class="login_btn">
                <button class="aui-btn aui-btn-success" :class="btnActive" :disabled="btnDisabled" @click='resetPsw()'>重置密码</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/md5.js"></script>
<script type="text/javascript">
    apiready = function() {
       vm.mobile = cl.userInfo.account;
    };

    var vm = new Vue({
        el: "#app",
        data: {
            mobile: '',
            code: '',
            psw: '',
            disabled: false,
            codedefault: '获取验证码',
            timer_num: 60, //倒计时
            isshowRemove: false,
            input_type: 'password',
            ishideOP: 'ishideOP',
            btnActive: '',
            btnDisabled: true
        },
        methods: {
            changeMobie: function() {
                if (vm.mobile.length == 0) {
                    vm.isshowRemove = false;
                }
                if (vm.mobile.length > 0 || vm.mobile.length > 11) {
                    vm.isshowRemove = true;
                    // vm.mobile = vm.mobile.slice(0, 11);
                }
            },
            changePsw: function() {
                if (vm.psw.length > 6) {
                    vm.btnActive = 'btnActive';
                    vm.btnDisabled = false
                } else {
                    vm.active = '';
                    vm.btnDisabled = true
                }
            },
            //一键清空
            clearAcount: function() {
                vm.mobile = '';
                vm.isshowRemove = false;
            },

            //是否可见密码
            isshowPass: function() {
                vm.input_type == 'password' ? vm.input_type = 'text' : vm.input_type = 'password';
                vm.ishideOP == 'ishideOP' ? vm.ishideOP = 'isshowOP' : vm.ishideOP = 'ishideOP';
            },
            getCode: function() {
              var timestamp=new Date().getTime();
              var Token = MD5(cl.sina+timestamp);
                if (vm.mobile == '') {
                    cl.toast({
                        msg: "请输入手机号"
                    })
                    return;
                }
                if (!cl.phoneNumberVerify.test(vm.mobile)) {
                    api.toast({
                        msg: '请输入正确的手机号',
                        duration: 2000,
                        location: 'bottom'
                    });
                    return;
                }
                api.ajax({
                    url: cl.apiServer + 'member/getAuthCode',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: ''
                    },
                    data: {
                        body: {
                            telephone: vm.mobile,
                            scene:'findpw',
                            csessionid:timestamp,
                            token:Token,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            cl.toast({
                                msg: "验证码发送成功"
                            });
                            timeClock = setInterval(function() {
                                vm.disabled = true;
                                vm.timer_num--;
                                if (vm.timer_num >= 10) {
                                    vm.codedefault = vm.timer_num + '秒后可重新获取';
                                }
                                if (vm.timer_num < 10 && vm.timer_num > 0) {
                                    vm.codedefault = '0' + vm.timer_num + '秒后可重新获取';
                                }
                                if (vm.timer_num == 0) {
                                    clearInterval(timeClock);
                                    vm.timer_num = 60;
                                    vm.codedefault = '重新获取';
                                    vm.disabled = false;
                                }
                            }, 1000);
                        }else{
                          cl.toast({
                              msg:ret.message
                          })
                        }
                    }
                })

            },
            resetPsw: function() {
                if (vm.mobile == '') {
                    cl.toast({
                        msg: "请输入手机号"
                    })
                    return;
                }
                if (!cl.phoneNumberVerify.test(vm.mobile)) {
                    api.toast({
                        msg: '请输入正确的手机号',
                        duration: 2000,
                        location: 'bottom'
                    });
                    return;
                }
                if (vm.code == '') {
                    cl.toast({
                        msg: "请输入验证码"
                    })
                    return;
                }
                api.ajax({
                    url: cl.apiServer + 'member/updataPassWordByMobile',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: ''
                    },
                    data: {
                        body: {
                            account: vm.mobile,
                            validateCode: vm.code,
                            pwd: vm.psw,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            api.setStatusBarStyle({
                                style: 'dark'
                            });
                            cl.openWin({
                                name: './order_comment_status'
                            })
                        }else{
                          cl.toast({
                              msg:ret.message
                          })
                        }
                    }
                })
            }
        }
    })
</script>

</html>
